﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/resource/apple.ico" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <link rel="stylesheet" href="/lobsteruiframe/layuiadmin/style/login.css" media="all">
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

    <style>
        .layadmin-user-login {
            padding: 0px;
        }

        .layadmin-user-login-main {
            width: 490px;
        }

        .msgs1 {
            background: #E6E6E6;
            color: #818080;
            border: 1px solid #CCCCCC;
        }

        .layui-form-item .layui-form-checkbox {
            margin-top: unset;
        }

            .layui-form-item .layui-form-checkbox[lay-skin=primary] {
                margin-top: unset
            }

        .layui-form-checkbox[lay-skin=primary] span {
            padding-left: unset;
            padding-right: unset;
        }
    </style>
</head>
<body>
    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
        <div class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>用户注册</h2>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <div class="layui-input">
                        <input type="radio" name="IsAdmin" value="0" title="普通用户" checked>
                        <input type="radio" name="IsAdmin" value="1" title="机构管理员">
                        <input type="radio" name="IsAdmin" value="9" title="开发者">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label>
                    <input type="text" name="UserCode" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="请设置用户名" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" name="PassWord" id="LAY-user-login-password" lay-verify="pass" placeholder="请设置登录密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label>
                    <input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required" placeholder="请确认登录密码" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                    <input type="text" name="Name" placeholder="请输入姓名" lay-verify="required" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-cols"></label>
                    <input type="text" name="IDNumber" placeholder="请输入身份证号" lay-verify="chkIDNumber" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone" for="LAY-user-login-cellphone"></label>
                    <input type="text" name="Telephone" id="LAY-user-login-cellphone" lay-verify="phone" placeholder="请输入手机号" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
                            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="请输入验证码" class="layui-input msgs">
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="getsmscode">获取验证码</button>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <input type="checkbox" name="agreement" lay-skin="primary" title="阅读并接受" checked>
                    <a href="#" id="link_agreement" class="layadmin-link layui-hide-xs">《用户协议》</a>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button>
                </div>
                <div class="layui-trans layui-form-item">
                </div>
            </div>
        </div>

    </div>
</body>
</html>

<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element'], {
        data: {
            $layui: null,
            pswdKey:''//短信Key
        },
        pageload: function () {

            this.initevent();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            var layer = this.data.$layui.layer;
            var form = this.data.$layui.form;
            var element = this.data.$layui.element;

            form.render();

            //自定义验证规则
            form.verify({
                chkIDNumber: function (sId) {
                    var len = sId.length, re;
                    var aCity = {
                        11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海",
                        32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南",
                        44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
                        63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
                    }
                    if (len > 0) {
                        var iSum = 0;
                        if (!/^\d{17}(\d|X|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";
                        sId = sId.replace(/x$/i, "a");
                        if (aCity[parseInt(sId.substr(0, 2))] == null) return "你的身份证地区非法";
                        sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
                        var d = new Date(sBirthday);
                        if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) return "身份证上的出生日期非法";
                        for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
                        if (iSum % 11 != 1) return "你输入的身份证号非法";
                    } else {
                        return "请输入你的身份证号码！";
                    }
                },
                chkphone: function (value) {
                    if (value == "" || value == null) {
                        return '手机号码必填';
                    }
                    var len = value.length
                    if (len > 0) {
                        if (len == 7)
                            re = new RegExp(/^([0-9]|[-])+$/g);
                        else if (len == 11)
                            re = new RegExp(/^[1][3-9]+\\d{9}/);
                        else {
                            return '输入的手机号码位数不对';
                        }
                    }
                },

                //密码验证
                pass: [
                    /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/
                    , '必须包含大小写字母和数字的组合，可以使用特殊字符，长度大于8'
                ],

                //确认密码
                repass: function (value) {
                    if (value !== $('#LAY_password').val()) {
                        return '两次密码输入不一致';
                    }
                }
            });

            //获取短信验证码
            var validCode = true;
            $("#getsmscode").click(function () {
                if (self.RulePhone($('#LAY-user-login-cellphone').val()) == false) {
                    layer.msg('输入的手机号码不对');
                    return;
                }
                var time = 60;//倒计时60s
                var code = $(this);
                if (validCode) {
                    validCode = false;
                    //后台发送短信验证码
                    lobsterlayui.GET("/admin/v1/Register/SendSmsVerCode", { phoneNumber: $('#LAY-user-login-cellphone').val(), smsKey: self.data.pswdKey }).then(data => {
                        layer.msg('短信验证码发送成功');
                        self.data.pswdKey = data.smsKey;

                        //按钮显示倒计时
                        validCode = false;
                        code.attr("disabled", true);
                        var t = setInterval(function () {
                            time--;
                            code.html(time + "秒");
                            if (time == 0) {
                                clearInterval(t);
                                code.html("重新获取");
                                validCode = true;
                                code.removeAttr('disabled');
                            }
                        }, 1000);
                    });

                }
            });

            $("#link_agreement").click(function () {
                var index = layer.open({
                    type: 1,
                    title: "用户协议",
                    btn: ["关闭"],
                    btnAlign: "r",
                    content: $('#dialog_Agreement').html(),
                    area: ["700px", "80%"],
                    maxmin: true,
                    success: function (layero, index) {
                        lobsterlayui.GET("/admin/v1/Register/GetRegAgreement").then(data => {
                            $("#page_Agreement").html(data.agreement.Contents);
                        });
                    },
                    yes: function (index, layero) {

                        layer.close(index); //关闭弹层
                    },
                    cancel: function () {

                    }
                });
            });

            //提交
            form.on('submit(LAY-user-reg-submit)', function (obj) {
                var field = obj.field;

                //确认密码
                if (field.PassWord !== field.repass) {
                    return layer.msg('两次密码输入不一致');
                }

                //是否同意用户协议
                if (!field.agreement) {
                    return layer.msg('你必须同意用户协议才能注册');
                }
                field.smsKey = self.data.pswdKey;

                self.RegUser(field);

                return false;
            });
        },
        RulePhone : function (string) {
            var pattern = /^1[3456789]\d{9}$/;
            if (pattern.test(string)) {
                return true;
            }
            return false;
        },
        RegUser: function (field) {
            var layer = this.data.$layui.layer;

            lobsterlayui.POST("/admin/v1/Register/RegUser", field).then(data => {
                layer.msg('注册成功', {
                    offset: '15px'
                    , icon: 1
                    , time: 1500
                }, function () {
                    //机构管理员注册
                    if (data.user.IsAdmin == 1) {
                        location.href = '/admin/login/RegWorker.html?UserId=' + data.user.UserID;//跳转注册机构页面
                    }
                    else {
                        location.href = '/admin/login/Index.html';//跳转到登入页
                    }
                });
            }).catch(res => {
                layer.msg('注册失败：' + res.msg);
            });

        }

    }, false);


</script>


<script type="text/html" id="dialog_Agreement">
    <div class="layui-fluid box">
        <div id="page_Agreement">
        </div>
    </div>
</script>